<template>
  <div>
    <input
      @input="onInput"
      v-model.trim="doctorName"
      placeholder="输入关键字搜索"
    />
    <TabularData :result="this.result" @open="onOpen" />
    <DetailPage
      :id="this.id"
      :records="records"
      @off="onOff"
      v-show="openDetailPage"
    />
  </div>
</template>
<script>
import DetailPage from "./components/DetailPage.vue";
import TabularData from "./components/TabularData.vue";
export default {
  components: { TabularData, DetailPage },
  data() {
    return {
      id: 0,
      openDetailPage: "",
      doctorName: "",
      records: [
        {
          date: "2022-01-01",
          doctor: "张三",
          diagnosis: "感冒",
          prescription: "感冒药",
        },
        {
          date: "2022-02-01",
          doctor: "李四",
          diagnosis: "头疼",
          prescription: "止疼药",
        },
        {
          date: "2022-03-01",
          doctor: "王五",
          diagnosis: "腰痛",
          prescription: "止痛贴",
        },
      ],
    };
  },
  created() {
    this.result = this.records;
  },
  methods: {
    onOff() {
      this.openDetailPage = "";
    },
    onOpen(id) {
      this.openDetailPage = "true";
      this.id = id;

      console.log(typeof this.id);
    },

    onInput() {
      if (this.doctorName === "") {
        this.result = this.records;
      } else {
        // this.result = this.records.filter((v) => v.doctor === this.doctorName);
        this.result = this.records.filter((v) =>
          v.doctor.startsWith(this.doctorName)
        );
      }
    },
  },
};
</script>
